<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="main"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>查询库存信息</title>
    <link th:href="@{/localcss/crmlist.css}" href="../static/localcss/crmlist.css" rel="stylesheet">
</head>
<body>
<div layout:fragment="content">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            销售机会管理 <i class="fa fa-lk"></i>
                        </h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <form method="post" action="/storage/list" th:action="@{/storage/list}">
                            <input type="button" value="关于">
                            <input type="button" value="查询" onclick="page(1)">
                            <input type="hidden" name="pageIndex" value="1"/>
                            <ul>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">产品</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="prodName" type="text" th:value="${prodName}"
                                                   class="form-control col-md-6 col-xs-12" value="prodName">
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">仓库</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="stkWarehouse" type="text" th:value="${stkWarehouse}"
                                                   class="form-control col-md-6 col-xs-12" value="stkWarehouse">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30"/>
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="datatable-responsive"
                                           class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid"
                                           aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="First name: activate to sort column descending"
                                                aria-sort="ascending">
                                                编号
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                产品
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                仓库
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                货位
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                件数
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                备注
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row" id="page">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script layout:fragment="js" th:inline="javascript">

    $(document).ready(function (){
        page(1);
    });
    function pageLimit(pageIndex){
        page(pageIndex);
    }
    function page(pageIndex){
        let frm = document.forms[0];
        $.ajax({
            type:"POST",
            url:"/crm/storage/postStorage",
            data:{pageIndex:pageIndex,
                prodName:encodeURI(encodeURI(frm.prodName.value)),
                stkWarehouse:encodeURI(encodeURI(frm.stkWarehouse.value))},
            success:function (data){
                $("#tbody").html("");
                let td = "";
                let dataJSON1 = JSON.parse(data.stkPage);
                let dataJSON2 = JSON.parse(data.proPage)
                let proName = "";
                let flag = false;
                console.log(JSON.parse(data.stkPage));
                console.log(JSON.parse(data.proPage));
                for (let i = 0; i < dataJSON1.records.length; i++){
                    for (let k = 0;k<dataJSON2.records.length;k++){
                        if (dataJSON1.records[i].stkProdId == dataJSON2.records[k].prodId){
                            proName = dataJSON2.records[k].prodName;
                            flag = true
                            break;
                        }else{
                            flag = false;
                        }
                    }
                    if(flag) {
                        td += "<tr role=\"row\" class=\"odd\"><td tabindex=\"0\" class=\"sorting_1\" >" + dataJSON1.records[i].stkId + "</td>";
                        td += "<td>" + proName + "</td>";
                        td += "<td>" + dataJSON1.records[i].stkWarehouse + "</td>";
                        td += "<td>" + dataJSON1.records[i].stkWare + "</td>";
                        td += "<td>" + dataJSON1.records[i].stkCount + "</td>";
                        td += "<td>" + dataJSON1.records[i].stkMemo + "</td>";
                    }
                }
                $("#tbody").html(td);
                if(frm.prodName.value ==null || frm.prodName.value =="") {
                    $("#page").html("");
                    let page = "<div class=\"col-sm-5\">" +
                        "<div class=\"dataTables_info\" id=\"datatable-responsive_info\"" +
                        " role=\"status\" aria-live=\"polite\">共<span>" + dataJSON1.total + "</span>条记录" +
                        " <span>" + dataJSON1.current + "</span>/<span>" + dataJSON1.pages + "</span>页</div>" +
                        " </div>" +
                        " <div class=\"col-sm-7\">" +
                        " <div class=\"dataTables_paginate paging_simple_numbers\"" +
                        " id=\"datatable-responsive_paginate\">" +
                        " <ul class=\"pagination\">";
                    if (dataJSON1.current > 1) {
                        page += " <li class=\"paginate_button previous\">" +
                            "<a href=\"#\" onclick=\"pageLimit(1);\"" +
                            "aria-controls=\"datatable-responsive\" data-dt-idx=\"0\"" +
                            " tabindex=\"0\">首页</a>" +
                            " </li>" +
                            " <li class=\"paginate_button \" }\"><a" +
                            " href=\"#\" onclick=\"pageLimit(" + (dataJSON1.current - 1) + ");\"" +
                            " aria-controls=\"datatable-responsive\" data-dt-idx=\"1\"" +
                            " tabindex=\"0\">上一页</a>" +
                            " </li>";
                    }
                    if (dataJSON1.current < dataJSON1.pages) {
                        page += " <li class=\"paginate_button \"><a" +
                            " href=\"#\" onclick=\"pageLimit(" + (dataJSON1.current + 1) + ");\"" +
                            " aria-controls=\"datatable-responsive\" data-dt-idx=\"1\"" +
                            " tabindex=\"0\">下一页</a>" +
                            " </li>" +
                            " <li class=\"paginate_button next\"><a" +
                            " href=\"#\" onclick=\"pageLimit(" + dataJSON1.pages + ");\"" +
                            " aria-controls=\"datatable-responsive\" data-dt-idx=\"7\"" +
                            "tabindex=\"0\">最后一页</a>" +
                            " </li>" +
                            " </ul>" +
                            " </div>" +
                            " </div>";
                    }else if (frm.prodName.value !=null || frm.prodName.value!="") {
                        $("#page").html("");
                        let page = "<div class=\"col-sm-5\">" +
                            "<div class=\"dataTables_info\" id=\"datatable-responsive_info\"" +
                            " role=\"status\" aria-live=\"polite\">共<span>" + dataJSON2.total + "</span>条记录" +
                            " <span>" + dataJSON2.current + "</span>/<span>" + dataJSON2.pages + "</span>页</div>" +
                            " </div>" +
                            " <div class=\"col-sm-7\">" +
                            " <div class=\"dataTables_paginate paging_simple_numbers\"" +
                            " id=\"datatable-responsive_paginate\">" +
                            " <ul class=\"pagination\">";
                        if (dataJSON2.current > 1) {
                            page += " <li class=\"paginate_button previous\">" +
                                "<a href=\"#\" onclick=\"pageLimit(1);\"" +
                                "aria-controls=\"datatable-responsive\" data-dt-idx=\"0\"" +
                                " tabindex=\"0\">首页</a>" +
                                " </li>" +
                                " <li class=\"paginate_button \" }\"><a" +
                                " href=\"#\" onclick=\"pageLimit(" + (dataJSON2.current - 1) + ");\"" +
                                " aria-controls=\"datatable-responsive\" data-dt-idx=\"1\"" +
                                " tabindex=\"0\">上一页</a>" +
                                " </li>";
                        }
                        if (dataJSON2.current < dataJSON2.pages) {
                            page += " <li class=\"paginate_button \"><a" +
                                " href=\"#\" onclick=\"pageLimit(" + (dataJSON2.current + 1) + ");\"" +
                                " aria-controls=\"datatable-responsive\" data-dt-idx=\"1\"" +
                                " tabindex=\"0\">下一页</a>" +
                                " </li>" +
                                " <li class=\"paginate_button next\"><a" +
                                " href=\"#\" onclick=\"pageLimit(" + dataJSON2.pages + ");\"" +
                                " aria-controls=\"datatable-responsive\" data-dt-idx=\"7\"" +
                                "tabindex=\"0\">最后一页</a>" +
                                " </li>" +
                                " </ul>" +
                                " </div>" +
                                " </div>";
                        }
                    }
                    $("#page").html(page);
                }
            },
            error:function (data){
                alert("对不起，获取数据失败！");
            }
        })
    }
</script>
</html>